<template>
  <div class="container">
    <el-card>
      <el-form
        ref="topForm"
        :model="form"
      >
        <el-form-item prop="effectiveDate" style="display: inline-block; width: 300px; margin-right: 12px; margin-bottom: 0;">
          <el-date-picker
            v-model="form.effectiveDate"
            type="daterange"
            start-placeholder="生效开始日期"
            end-placeholder="生效结束日期"
            clearable
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
          />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="queryGetTableData">搜索</el-button>
      </el-form>
    </el-card>
    <el-card style="margin-top: 12px;">
      <BaseTable
        ref="exchangeSettingTable"
        :table-data="tableData"
        :table-list="tableList"
        :loading="exchangeLoading"
        :total="total"
        show-index
        show-pagination
        @pagination="handlePagination"
      />
    </el-card>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import { formatTime, getDictionaryLabel } from '@/utils/tools'
import { exchangeList } from '@/service/exchangeSetting'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'ExchangeSetting',
  components: {
    BaseTable
  },
  data() {
    return {
      exchangeLoading: false,
      form: {
        effectiveDate: []
      },
      visible: false,
      tableData: [],
      tableList: [
        {
          label: '原币种',
          prop: 'originalCurrency',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = getDictionaryLabel(row[prop], this.currency)
            return <span>{text}</span>
          }
        },
        {
          label: '目标币种',
          prop: 'targetCurrency',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = getDictionaryLabel(row[prop], this.currency)
            return <span>{text}</span>
          }
        },
        {
          label: '直接汇率',
          prop: 'directExchangeRate',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = row[prop].toFixed(8)
            return <span>{text}</span>
          }
        },
        {
          label: '间接汇率',
          prop: 'indirectExchangeRate',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = row[prop].toFixed(8)
            return <span>{text}</span>
          }
        },
        {
          label: '生效日期',
          prop: 'effectiveDate',
          width: '134px',
          render: function(node, data) {
            const { row, column: { prop }} = data
            const text = formatTime(row[prop], 'YYYY-MM-DD')
            return <span>{{ text }}</span>
          }
        },
        {
          label: '失效日期',
          prop: 'expirationDate',
          width: '134px',
          render: function(node, data) {
            const { row, column: { prop }} = data
            const text = formatTime(row[prop], 'YYYY-MM-DD')
            return <span>{{ text }}</span>
          }
        },
        {
          label: '状态',
          prop: 'status',
          render: (node, data) => {
            const { row, column: { prop }} = data
            const text = row[prop] === 1 ? '启用' : '禁用'
            return <span>{{ text }}</span>
          }
        }
      ],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      style: {
        width: '100%'
      }
    }
  },
  computed: {
    ...mapState({ currency: state => state.base.currency })
  },
  mounted() {
    this.getCurrencyList()
    this.queryGetTableData()
  },
  methods: {
    ...mapActions({ getBaseDataList: 'base/getBaseDataList' }),
    async getTableData() {
      this.exchangeLoading = true
      let [effectiveStartDate, effectiveEndDate] = this.form.effectiveDate || []
      effectiveStartDate = effectiveStartDate ? `${effectiveStartDate} 00:00:00` : ''
      effectiveEndDate = effectiveEndDate ? `${effectiveEndDate} 23:59:59` : ''
      const params = {
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
        effectiveStartDate,
        effectiveEndDate
      }
      const { records, total } = await exchangeList({ ...params }).finally(() => { this.exchangeLoading = false })
      this.tableData = records
      this.total = total
    },
    handlePagination(data) {
      const { pageIndex, pageSize } = data
      this.pageIndex = pageIndex
      this.pageSize = pageSize
      this.getTableData()
    },
    getCurrencyList() {
      this.getBaseDataList({ type: 'currency' })
    },
    queryGetTableData() {
      this.pageSize = 10
      this.pageIndex = 1
      this.$refs.exchangeSettingTable.pageSize = 10
      this.$refs.exchangeSettingTable.pageIndex = 1
      this.getTableData()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin: 12px;
  width: calc(100% - 24px);
}
</style>
